<template>
    <!-- 设置告警等级，告警阈值，告警方式 -->
    <el-button
            type="primary"
            plain
            icon="el-icon-plus"
           
            @click="handleAddConfig"
    >新增
    </el-button>
    <!-- 查询结果 -->
    <el-table :data="configListData" style="width: 100%">
        <el-table-column label="配置名称" align="center" prop="configName"/>
        <el-table-column label="表名" align="center" prop="tableName"/>
        <el-table-column label="字段" align="center" prop="field"/>
        <el-table-column label="单位" align="center" prop="fieldUnit"/>
        <el-table-column label="阈值类型" align="center" prop="thresholdType">
            <template v-slot="scope">
                <el-select disabled v-model="scope.row.thresholdType">
                    <el-option
                            v-for="dict in thresholdTypeOptions"
                            :key="dict.dictValue"
                            :label="dict.dictLabel"
                            :value="dict.dictValue"
                    ></el-option>
                </el-select>
            </template>
        </el-table-column>
        <el-table-column label="运算符" align="center" prop="symbols">
            <template v-slot="scope">
                <el-select disabled v-model="scope.row.symbols">
                    <el-option
                            v-for="dict in symbolsOptions"
                            :key="dict.dictValue"
                            :label="dict.dictLabel"
                            :value="dict.dictValue"
                    ></el-option>
                </el-select>
            </template>
        </el-table-column>
        <el-table-column label="通知阈值数" align="center" prop="notifyThreshold"/>
        <el-table-column label="警告阈值数" align="center" prop="warningThreshold"/>
        <el-table-column label="紧急阈值数" align="center" prop="emergencyThreshold"/>
        <el-table-column label="告警策略" align="center">
            <template v-slot="scope">
                <el-select disabled v-model="scope.row.strategyIds" :multiple="true">
                    <el-option
                            v-for="strategy in scope.row.alarmStrategyList"
                            :key="strategy.strategyId"
                            :label="strategy.strategyName"
                            :value="strategy.strategyId"
                    ></el-option>
                </el-select>
            </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="180px">
            <template v-slot="scope">
                <el-button icon="el-icon-edit"
                           @click="handleUpdateConfig(scope.row)">修改
                </el-button>
                <el-button icon="el-icon-delete"
                           @click="handleDeleteConfig(scope.row)">删除
                </el-button>
            </template>
        </el-table-column>
    </el-table>

    <!-- 新增或修改 -->
    <update-config :title="title" :form="alarmConfig" :threshold-type-options="thresholdTypeOptions"
                   :symbols-options="symbolsOptions" :open="open"
                   v-on:dialogStatusChanged="changeDialogStatus($event)">
    </update-config>
</template>

<script>
    import {getConfigList, delConfig} from '/src/api/alarm/configure'
    import updateConfig from './update.vue'

    export default {
        name: "index",
        components: {updateConfig},
        data() {
            return {
                configListData: [],
                strategyListData: [],
                //阈值类型
                thresholdTypeOptions: [],
                //运算符
                symbolsOptions: [],
                //修改或新增
                open: false,
                title: '',
                alarmConfig: {},
            }
        },
        created() {
            this.getDicts("threshold_type").then(response => {
                this.thresholdTypeOptions = response.data;
            });
            this.getDicts("alarm_symbols").then(response => {
                this.symbolsOptions = response.data;
            });
            this.getConfigListByParam()
        },
        methods: {
            getConfigListByParam() {
                getConfigList(this.queryParams).then((res) => {
                    this.configListData = res.rows
                })
            },
            handleAddConfig() {
                this.title = "新增配置信息"
                this.open = true
            },
            handleUpdateConfig(row) {
                this.alarmConfig = row
                this.title = '修改配置信息'
                this.open = true
            },
            handleDeleteConfig(row) {
                this.$confirm('是否确认删除配置为"' + row.configName + '"的数据项?', '警告', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(function () {
                    return delConfig(row.configId)
                }).then(() => {
                    this.getConfigListByParam()
                    this.msgSuccess('删除成功')
                })
            },
            //更改弹出框的状态
            changeDialogStatus(status) {
                this.open = status
                this.getConfigListByParam()
            },
        },
    }
</script>

<style scoped>

</style>
